import React, { useState, useEffect, useCallback } from 'react'
import style from '@pages/filingCaseManage/CaseManage.module.less'
import SearchForm from './components/SearchForm/Index'
import Common from '@js/common'
import { Button, Space, Table, Radio, message } from 'antd'
import { getColumns } from './util'
import { getListRequest } from './ajax'
import { awaitWrap, confirmAction } from '@js/tool'
import { DownloadOutlined, PlusOutlined } from '@ant-design/icons'
import nStyle from './Index.module.less'
import EditModal from './components/EditModal/Index'
import { json2Excel } from '@src/assets/js/excel'

async function initList (status, pageSize, current, condition, setLoading, setList, setTotal) {
  setLoading(true)
  condition = [...condition, { k: 'status', o: '=', v: status }]
  const [e, d] = await awaitWrap(getListRequest({
    current,
    page_size: pageSize,
    condition: JSON.stringify(condition)
  }))
  setLoading(false)
  if (e === null && d !== null) {
    setTotal(d.total)
    setList(d.list.map((li, i) => {
      li.index = i + 1 + pageSize * (current - 1)
      return li
    }))
  }
}

async function downloadExcel (status, condition) {
  const h = message.loading('导出中', 120)
  condition = [...condition, { k: 'status', o: '=', v: status }]
  const [e, d] = await awaitWrap(getListRequest({
    current: 1,
    page_size: 100000,
    condition: JSON.stringify(condition)
  }))
  h()
  if (e === null && d !== null) {
    const list = d.list.map((l, i) => {
      return {
        序号: i + 1,
        鉴定机构名称: l.name,
        鉴定机构类型: l.type,
        联系人: l.contact,
        联系电话: l.tel,
        状态: l.status === 1 ? '正常' : '停止指定'
      }
    })
    json2Excel([{ data: list, sheetname: '鉴定机构' }], '鉴定机构')
  }
}

function Main ({ title }) {
  const [common] = useState(new Common())
  const [list, setList] = useState([])
  const [condition, setCondition] = useState([])
  const [status, setStatus] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [current, setCurrent] = useState(1)
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  const [visible, setVisible] = useState(false)
  const [modifyData, setModifyData] = useState(null)
  const [version, setVersion] = useState(0)
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: total => `共 ${total} 条记录`,
    size: 'small'
  })
  const refreshFn = useCallback(() => {
    initList(status, pageSize, current, condition, setLoading, setList, setTotal)
  }, [status, pageSize, current, condition])
  useEffect(() => {
    setPagination({
      current,
      pageSize,
      total,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: total => `共 ${total} 条记录`,
      size: 'small'
    })
  }, [pageSize, current, total])
  useEffect(() => {
    refreshFn()
  }, [version, refreshFn])
  return (
    <div className={style.container}>
      <EditModal visible={visible} data={modifyData} hide={() => setVisible(false)} refreshFn={() => { setCurrent(1); setVersion(version + 1) }} />
      <div className={style['title-line']}>
        <span>{title}</span>
      </div>
      <div className={style['search-container']}>
        <div className={style['search-form']}>
          <SearchForm onChange={d => {
            setCondition(d)
            setCurrent(1)
          }}
          />
        </div>
      </div>
      <div className={nStyle['btn-line']}>
        <Button icon={<DownloadOutlined />} onClick={() => confirmAction('您确定要导出excel吗？', () => downloadExcel(status, condition))}>导出excel</Button>
        <Space>
          <Button icon={<PlusOutlined />} type='primary' ghost onClick={() => { setVisible(true); setModifyData(null) }}>新增机构</Button>
          <Radio.Group
            value={status}
            onChange={(e) => {
              setStatus(e.target.value)
              setCurrent(1)
              setVersion(version + 1)
            }}
          >
            <Radio.Button value={1}>正常</Radio.Button>
            <Radio.Button value={0}>停止指定</Radio.Button>
          </Radio.Group>
        </Space>
      </div>
      <div className={style['table-container']}>
        <Table
          rowKey='id'
          columns={getColumns(common, setVisible, setModifyData, () => { setVersion(version + 1) })}
          loading={loading}
          dataSource={list}
          pagination={pagination}
          onChange={({ current, pageSize }) => { setCurrent(current); setPageSize(pageSize) }}
        />
      </div>
    </div>
  )
}

export default Main
